<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>     
<jsp:include  page="../header.jsp"/> 

			<fieldset>
		    	<legend><strong>项目数据</strong></legend>

				<div class="form-inline">
		    	

				<select class="form-control" id="projectSelectChange">
					<option value="">选择项目查询</option>
					<c:forEach items="${projectSelectList}" var="list" varStatus="s"> 
					<option <c:choose><c:when test="${list.id == projectId}">selected</c:when></c:choose> value="${list.id}">${list.project_name}</option>
					</c:forEach>
	            </select>


	            <button type="button" class="btn btn-primary btn-lg btnEdit" data-toggle="modal" data-target="#myModal" style="float:right">
					新增 
				</button>
	            </div>
		    	<br><br>

				<table class="table table-striped">
					<thead>
						<tr>
							<th>(项目/模块)名称</th>
							<th width="150">
								操作
							</th>
						</tr>
					</thead>
					<tbody id="testRow">
						<c:forEach items="${projectList}" var="list" varStatus="s"> 
						<tr>
							<td><strong>${list.project_name}</strong></td>
							<td>
								<button type="button" class="btn btn-info btn-sm btnEdit" data-toggle="modal" data-target="#myModal" data-name="${list.project_name}" data-id="${list.id}">编辑</button>
							</td>
						</tr>
						<c:forEach items="${list.moduleList}" var="listModule" varStatus="s"> 
						<tr>
							<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${listModule.module_name}</td>
							<td>
								<button type="button" class="btn btn-info btn-sm btnEdit" data-toggle="modal" data-target="#myModal" data-name="${listModule.module_name}" data-id="${listModule.id}" data-project-id="${listModule.project_id}">编辑</button>
							</td>
						</tr>
						</c:forEach>
						</c:forEach>
					</tbody> 
				</table>


			</fieldset> 




	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
	    	<div class="modal-content">
	      		<div class="modal-header">
	        		<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        		<h4 class="modal-title" id="myModalLabel"> 项目/模块 </h4>
	      		</div>
	      		<div class="modal-body">
	        		<form>
	        			<input type="hidden" id="dataId" value="0">
	        			<div class="form-group" id="projectSelect">
				            <label for="project" class="control-label">上一级:</label>
				            <select class="form-control" id="project">
								<option value="0">无</option>
								<c:forEach items="${projectList}" var="list" varStatus="s"> 
								<option value="${list.id}">${list.project_name}</option>
								</c:forEach>
				            </select>
				      	</div>
	        			<div class="form-group">
				            <label for="projectName" class="control-label">名称:</label>
				            <input type="text" class="form-control" id="projectName">
				      	</div>
	        		</form>
	      		</div>
		      	<div class="modal-footer">
		        	<button type="button" class="btn btn-default" data-dismiss="modal"> 关 闭 </button>
		        	<button type="button" class="btn btn-primary btnSave"> 保 存 </button>
		      	</div>
	    	</div>
		</div>
	</div>


	<script type="text/javascript">
		function ajaxBeforeSend() {
			layer.load(1, {
			    shade: [0.3,'#000']  
			});
		}

		function ajaxComplete() {
			layer.closeAll('loading');
		}

		$(document).ready(function(){
			$("#projectSelectChange").change(function(){ 
				location.href = '${basePath}chart/project?projectId=' + $(this).val();
			})


			$('.btnEdit').click(function() {
				var id = $(this).attr('data-id');
				var projectId = $(this).attr('data-project-id');
				var name = $(this).attr('data-name');

				// console.log(id, projectId, name);

				if (id && id > 0) {
					$('#dataId').val(id);	

					if (!projectId) {
						$('#projectSelect').hide();
					} else {
						$('#projectSelect').show();
					}
				} else {
					$('#dataId').val(0);	

					$('#projectSelect').show();
				}
				if (projectId && projectId > 0) {
					$('#project').val(projectId);
				} else {
					$('#project').val(0);
				}
				if (name) {
					$('#projectName').val(name);
				} else {
					$('#projectName').val('');
				}
			})

			$('.btnSave').click(function() { 
				var id = $('#dataId').val();	
				var projectId = $('#project').val();
				var name = $('#projectName').val();

				$.ajax({
	            	type: "POST",
	             	url: "${basePath}chart/saveProject",
	             	data: {id : id, name : name, projectId : projectId},
	             	dataType: "json",
	             	beforeSend: ajaxBeforeSend(),
	         		complete: ajaxComplete(),
	             	success: function(data){
	             		if (data.status == 200) {
	             			// layer.alert("已保存入库");

	             			// $('#myModal').modal('hide')

	             			location.reload();
	             		} else {
	             			layer.alert(data.message);
	             		}
	         		}
				})
			})

			
		})
	</script>

<jsp:include  page="../footer.jsp"/> 